<template>
  <div style="padding:10px">
    <div style="margin: 10px  0">
      <!--      功能区域-->
      <el-button type="primary" @click="add">新增用户</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
      <!--      <el-button type="primary">删除</el-button>-->
    </div>

    <div style="margin: 10px 0">
      <!--      搜索区域-->
      <el-input v-model="search" placeholder="根据姓名或身份证号查询"  style="width: 20%" clearable @input="change($event)" />
      <el-button type="primary" style="margin-left: 5px" @click="load">查询用户</el-button>
    </div>
    <!--    <el-button>按钮</el-button>-->
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column prop="id" sortable label="ID" width="50px" />
      <el-table-column prop="username" label="用户名" width="100px" />
      <el-table-column prop="sex" label="性别"  width="60px"/>
      <el-table-column prop="age" label="年龄" width="80px" />
      <el-table-column prop="address" label="地址" width="150px"/>
      <el-table-column prop="phone" label="手机号" width="150px"/>
      <el-table-column prop="name" label="真实姓名" width="100px"/>
      <el-table-column prop="idcard" label="身份证号" width="180px"/>
      <el-table-column label="账号状态"  width="100px">
        <template #default="scope">
          {{ scope.row.status === 1 ? '正常' : '冻结中' }}
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button  @click="handleIdentify(scope.row)" size="small" type="info" v-if="scope.row.name==null||scope.row.idcard==null">实名</el-button>
          <el-button  @click="handleEdit(scope.row)" size="small" type="primary">编辑</el-button>
          <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger" size="small" >删除</el-button>
            </template>
          </el-popconfirm>
          <el-button  @click="handlefreeze(scope.row.id)" size="small" type="warning" v-if="scope.row.status==1">冻结</el-button>
          <el-button  @click="handlefreeze(scope.row.id)" size="small" type="warning" v-if="scope.row.status==0">解冻</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 10px 0">
      <el-pagination
          v-model:currentPage="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 15, 20]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
      <el-dialog v-model="dialogVisible" title="新增用户" width="30%">
        <el-form :model="form" label-width="120px" :rules="rules" ref="form">
          <el-form-item label="用户名" >
            <el-input v-model="form.username" style="width: 80%" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.password" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="form.sex" >
              <el-radio label="男" size="large">男</el-radio>
              <el-radio label="女" size="large">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="form.age" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="地址">
            <el-input v-model="form.address" style="width: 80%"/>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" style="width: 80%" maxlength="11" minlength="11"/>
          </el-form-item>

        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save('form')" >确认</el-button>
      </span>
        </template>
      </el-dialog>

      <el-dialog v-model="dialogFormVisible" title="实名认证" width="30%">
        <el-form :model="idform" label-width="120px" :rules="rules" ref="idform" >
          <el-form-item label="用户名" >
            <el-input v-model="idform.username" disabled="true" style="width: 80%" />
          </el-form-item>
          <el-form-item label="真实姓名" prop="name">
            <el-input  v-model="idform.name" style="width: 80%" />
          </el-form-item>
          <el-form-item label="身份证号" prop="idcard" >
            <el-input v-model="idform.idcard" style="width: 80%" maxlength="18"  />
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="identify('idform')" >确认</el-button>
      </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>


import request from "../utils/request";

export default {
  name: 'User',

  components: {

  },
  data(){
    return{
      form:{
        phone:'',
      },
      idform:{
        name:'',
        idcard:'',
      },

      rules: {
        name: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 6, message: '长度在 3 到 5 个字符', trigger: 'blur' },
          {pattern: '^[\u4e00-\u9fa5]{2,4}$', message: '格式错误'}
        ],
        idcard: [
          { required: true, message: '请输入身份账号', trigger: 'blur' },
          { min: 18, max: 18, message: '18位数字', trigger: 'blur' },
          {pattern: '^[1-9]\\d{7}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}$|^[1-9]\\d{5}[1-9]\\d{3}((0\\d)|(1[0-2]))(([0|1|2]\\d)|3[0-1])\\d{3}([0-9]|X)$', message: '格式错误'}
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '11位数字', trigger: 'blur' },
          {pattern: '^1(3\\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\\d|9[0-35-9])\\d{8}$', message: '格式错误'}
        ],

      },
      tableData,
      currentPage:1,
      pageSize:10,
      total:10,
      dialogVisible:false,
      dialogFormVisible:false
    }
  },
  created() {//加载方法
    console.log(tableData)
    this.load()
  },
  methods:{
    load(url, config){
      request.get("/api/user",{
        params:{
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    identify(idform){
      //校验表单 不符合标准不通过
      this.$refs[idform].validate((valid) => {  //开启校验
        if (valid) {   // 如果校验通过，请求接口，允许提交表单
          if(this.idform.id){
            //实名更新
            request.put("/api/user", this.idform).then(res => {
              console.log(res)
              if (res.code == '200'){
                this.$message({
                  type:"success",
                  message:"实名成功"
                })
              }else{
                this.$message({
                  type:"error",
                  message:res.msg
                })
              }
              this.load()//刷新表格数据
              this.dialogFormVisible = false//关闭弹窗
            })
          }
        } else {   //校验不通过
          return false;
        }
      });

      // }

    },
    save(form){
      this.$refs[form].validate((valid) => {  //开启校验
        if (valid) {   // 如果校验通过，请求接口，允许提交表单
          if(this.form.id){
            //更新
            request.put("/api/user", this.form).then(res => {
              console.log(res)
              if (res.code == '200'){
                this.$message({
                  type:"success",
                  message:"更新成功"
                })
              }else{
                this.$message({
                  type:"error",
                  message:res.msg
                })
              }
              this.load()//刷新表格数据
              this.dialogVisible = false//关闭弹窗
            })
          }else{
            //新增
            request.post("/api/user", this.form).then(res => {
              console.log(res)
              if (res.code == '200'){
                this.$message({
                  type:"success",
                  message:"新增成功"
                })
              }else{
                this.$message({
                  type:"error",
                  message:res.msg
                })
              }
              this.load()//刷新表格数据
              this.dialogVisible = false//关闭弹窗
            })
          }
        } else {   //校验不通过
          return false;
        }
      });


    },
    add(){
      this.dialogVisible = true;
      this.form = {};
    },
    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row))
      this.dialogVisible = true;
    },
    handleIdentify(row){
      this.idform= JSON.parse(JSON.stringify(row))
      this.dialogFormVisible= true;
    },
    handleSizeChange(){
      this.load()
    },
    handleCurrentChange(){
      this.load()
    },
    handleDelete(id){
      console.log(id)
      request.delete("/api/user/"+ id).then(res => {
        if (res.code == '200'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()//重新加载删除之后的
      })
    },
    handlefreeze(id){
      request.put("/api/user/"+ id).then(res => {
        if (res.code == '200'){
          this.$message({
            type:"success",
            message:"冻结成功"
          })
        }else {
          this.$message({
            type: "error",
            message: res.msg
          })
        }
        this.load()//重新加载删除之后的
      })
    },

    change(e){
      this.$forceUpdate()
    },

  }
}
const tableData = [

]
</script>
